<template>
  <span :currentTime="currentTime" :endTime="endTime" :startTime="startTime" :startCb="startCb" :endCb="endCb" :endText="endText">
          <slot>
          <span :style="{color:tstyle}">
            {{content}}
           </span>
          </slot>
  </span>
</template>
<script>
  export default {
    data() {
      return {
        content: '',
        tstyle : '',
        countdownTimer: null,
        sysTime: 0
      }
    },
    props: {
      endTime: {
        type: Number,
        default: ''
      },
      startTime: {
        type: Number,
        default: ''
      },
      currentTime: {
        type: Number,
        default: ''
      },
      endText: {
        type: String,
        default: '已结束'
      },
      startCb: {
        type: Function,
        default: function() {}
      },
      endCb: {
        type: Function,
        default: function() {}
      }
    },
    mounted() {
      this.sysTime = Date.parse(new Date(this.currentTime))
      this.init(this.startTime, this.endTime, this.sysTime)
      this.countdown(this.startTime, this.endTime, this.sysTime)
      this.countdownTimer = setInterval(() => {
        this.countdown(this.startTime, this.endTime, this.sysTime)
      }, 1000)
    },
    beforeDestroy() {
      clearInterval(this.countdownTimer);
    },
    methods: {
      countdown(startTime, endTime, sysTime) {
        if (startTime > endTime){
           this.content = this.endText;
           return;
        }
        if (startTime < sysTime) {
          // 已开始
          var t = endTime - sysTime;
          var isStart = true
        } else {
          // 未开始
          var t = startTime - sysTime;
          var isStart = false
        }
        
        if (t > 0) {
          var day = Math.floor(t / 86400000);
          var hour = Math.floor((t / 3600000) % 24);
          var min = Math.floor((t / 60000) % 60);
          var sec = Math.floor((t / 1000) % 60);
          hour = hour < 10 ? "0" + hour : hour;
          min = min < 10 ? "0" + min : min;
          sec = sec < 10 ? "0" + sec : sec;
          var format = '';
          if (day > 0) {
            format = `${day}天${hour}小时${min}分${sec}秒`;
          }
          if (day <= 0 && hour > 0) {
            format = `${hour}小时${min}分${sec}秒`;
          }
          if (day <= 0 && hour <= 0) {
            format = `${min}分${sec}秒`;
          }
          if (isStart){
           this.tstyle = '#e6b808';
          }
          this.content = format;
          
        } else {
          if (isStart) {
            //结束
            clearInterval(this.countdownTimer);
            this.content = this.endText;
            this._endCb();
          } else {
            this.content = '开始竞拍';
            this._startCb();
          }
        }
        this.sysTime += 1000;
      },
      init(startTime, endTime, sysTime) {
        if (startTime < sysTime) {
          // 已开始
          // console.log(11111)
          this._startCb();
        } else {
          // console.log(22222)
          this._endCb();
        }
      },
      _startCb() {
        if (this.startCb && this.startCb instanceof Function) {
          this.startCb(...this);
        }
      },
      _endCb() {
        if (this.endCb && this.endCb instanceof Function) {
          this.endCb(...this);
        }
      }
    }
  }
</script>